<!DOCTYPE html>
<html>
<head>
    <title>MySQL to DmSQL Converter</title>
    <link rel="stylesheet" href="static/styles.css">
    <script>
        function convertSQL() {
            // 获取MySQL SQL脚本内容
            var mysqlSQL = document.getElementById('mysqlSQL').value;
            var selectedOption = document.getElementById('tableName').value;

            // TODO: 编写转换函数将mysqlSQL转换为DmSQL
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'http://localhost:28080/convert?mysqlSql=' + encodeURIComponent(mysqlSQL)
                + '&tabSpaceName=' + encodeURIComponent(selectedOption), true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    if (xhr.status === 200) {
                        // 请求成功，将服务器返回的 DmSQL 设置到 dmSQL 文本框中
                        document.getElementById('dmSQL').value = JSON.parse(xhr.responseText).DmSQL;
                    } else {
                        // 请求失败，显示错误信息
                        console.error('请求失败:', xhr.status);
                    }
                }
            };

            // 发送请求
            xhr.send();
        }
    </script>
    <style>
        /* 样式化 select 元素 */
        select {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #fff;
            font-size: 16px;
            width: 200px;
        }

        /* 自定义 select 下拉箭头样式 */
        select::-ms-expand {
            display: none;
        }
        select::after {
            content: '\25BC';
            position: absolute;
            top: 12px;
            right: 10px;
            pointer-events: none;
        }
    </style>
</head>
<body>
<h1>MySQL to DmSQL Converter</h1>

<div class="select-container">
    <label for="tableName" style="margin-right: 10px;">表空间选择：</label>
    <select id="tableName">
        <option value="tab_ehcore">tab_ehcore</option>
        <option value="tab_ehcorebase">tab_ehcorebase</option>
        <option value="tab_ehuser">tab_ehuser</option>
        <option value="tab_ehmessage">tab_ehmessage</option>
        <option value="tab_ehaclink">tab_ehaclink</option>
        <option value="tab_ehcustomsp">tab_ehcustomsp</option>
        <option value="tab_ehecommerce">tab_ehecommerce</option>
        <option value="tab_ehetl">tab_ehetl</option>
        <option value="tab_ehofficeauto">tab_ehofficeauto</option>
        <option value="tab_ehparking">tab_ehparking</option>
        <option value="tab_ehpromotion">tab_ehpromotion</option>
        <option value="tab_ehpropertymgr">tab_ehpropertymgr</option>
        <option value="tab_ehrealty">tab_ehrealty</option>
        <option value="tab_ehreport">tab_ehreport</option>
        <option value="tab_ehspacebase">tab_ehspacebase</option>
        <option value="tab_ehvendordocking">tab_ehvendordocking</option>
    </select>
</div>
<textarea id="mysqlSQL" rows="15" placeholder="在这里输入MySQL SQL脚本"></textarea>
<br>
<button onclick="convertSQL()">转换为DmSQL</button>
<br>
<textarea id="dmSQL" rows="15" placeholder="这里将显示转换后的DmSQL脚本"></textarea>
</body>
</html>